<template>
  <swiper
    :class="{
      'paginate-small': props.paginateSmall
    }"
    v-bind="$attrs"
    @swiper="onSwiper"
    :lazy="true"
    @slideChange="onSlideChange"
    :modules="[Navigation]"
    navigation
    :pagination="{
      clickable: true
    }"
    class="w-full h-full cps-swiper"
    :style="{
      height: props.height
    }"
  >
    <swiper-slide v-for="(src, index) in swipperDatas" :key="index">
      <slot :src="src" :record="src" :index="index">
        <div class="swiper-item flex items-center h-full w-full justify-center">
          <video-player
            :ref="el => (videoListRef[index] = el)"
            v-if="isVideo(src)"
            controls
            :src="src"
          ></video-player>
          <viewImg
            :height="props.height"
            v-else-if="src"
            :src="src"
            :isCompress="1"
            :w="props.ossW || 800"
            :list-src="swipperDatas"
          ></viewImg>
        </div>
      </slot>
    </swiper-slide>
  </swiper>
</template>
<script setup>
import { ref, watch } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.min.css'
import { Navigation } from 'swiper'
import { isVideo } from 'utils/utils'
const emits = defineEmits(['onSwiper'])
const videoListRef = ref([])
const activeIndex = ref(0)
const swipperDatas = ref([])
const props = defineProps({
  items: {
    type: Array,
    default: () => []
  },
  paginateSmall: {
    type: Boolean,
    default: false
  },
  ossW: {
    type: Number,
    default: null
  },
  height: {
    type: [Number, String],
    default: null
  }
})
const onSwiper = swiper => {
  emits('onSwiper', swiper)
}
const onSlideChange = swiper => {
  activeIndex.value = swiper.activeIndex
  setTimeout(() => {
    videoListRef.value.forEach((video, index) => {
      if (activeIndex.value !== index) {
        video.pause()
      } else {
        video.play()
      }
    })
  }, 3000)
  emits('slideChange', arguments)
}

watch(
  () => props.items,
  () => {
    swipperDatas.value = props.items
  },
  { deep: true, immediate: true }
)
</script>

<style>
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: unset;
}
</style>
<style lang="scss">
.cps-swiper {
  &.paginate-small {
    .swiper-button-next,
    .swiper-button-prev {
      height: 35px;
      width: 20px;
      &::after {
        color: #000;
        font-size: 14px;
      }
    }
  }
}
</style>
